import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { ResidentSingersWrapper } from './style';
import ListHeader from '../../../../../../components/list-header';
import { shallowEqualApp, useAppSelector } from '@/store/hooks';
import { getImgOnSize } from '@/utils/format';
interface IProps {
  children?: ReactNode;
}

const ResidentSingers: FC<IProps> = (props) => {
  const { singers } = useAppSelector(
    (state) => ({
      singers: state.recommended.residentSingers,
    }),
    shallowEqualApp
  );
  return (
    <ResidentSingersWrapper>
      <ListHeader name={'入驻歌手'} moreLink={'/discover/singers'}></ListHeader>
      <div className="list">
        {singers.map((singer) => {
          return (
            <a href="#/discover/singer" key={singer.id}>
              <div className="img">
                <img src={getImgOnSize(singer.picUrl, 62)} />
              </div>
              <div className="info">
                <div className="info_name">{singer.name}</div>
                <div className="detail">{singer.alias}</div>
              </div>
            </a>
          );
        })}
      </div>
      <div className="button">
        <a href="" className="sprite_button">
          <span className="sprite_button">申请成为网易音乐人</span>
        </a>
      </div>
    </ResidentSingersWrapper>
  );
};

export default memo(ResidentSingers);
